<script setup name="create-remark">
import { watch, reactive, ref } from 'vue';
const emit = defineEmits(['change', 'close']);
const fieldRef = ref(null);
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    initData: {
        type: String,
        default: ''
    }
});
const state = reactive({
    showPopup: props.show,
    buyRemark: ''
});

watch([() => props.show, () => props.initData], ([show, initData]) => {
    if (show) {
        state.showPopup = show;
        setTimeout(() => {
            fieldRef?.value?.focus();
        }, 300);
    }

    state.buyRemark = initData;
});

const onClickCloseIcon = () => {
    emit('close');
    state.showPopup = false;
};

const onRemarkConfirm = () => {
    emit('change', state.buyRemark);
    state.showPopup = false;
};
</script>

<template>
    <van-popup
        v-model:show="state.showPopup"
        round
        lock-scroll
        :style="{ height: 'calc(100% - 188px)', backgroundColor: '#F6F6F6' }"
        position="bottom"
        close-icon-position="top-left"
        :close-on-click-overlay="false"
    >
        <div class="popup-header">
            <div class="left" @click="onClickCloseIcon">
                <c-icon name="close" size="24" color="#1a1a1a"></c-icon>
            </div>
            <div class="title">备注</div>
            <div class="right" @click="onRemarkConfirm">确定</div>
        </div>
        <div class="popup-content">
            <van-field
                ref="fieldRef"
                v-model="state.buyRemark"
                :update:model-value="(state.buyRemark = state.buyRemark.replace(/[\r\n]/g, ''))"
                :style="{ borderRadius: '10px', fontSize: '16px' }"
                rows="4"
                type="textarea"
                maxlength="60"
                placeholder="选填，商家可见"
            />
        </div>
    </van-popup>
</template>

<style lang="less" scoped>
@import '../../../../styles/variables.less';
@import '../../../../styles/mixin.less';

.popup-header {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left,
    .right {
        width: 52px;
        height: 28px;
        line-height: 28px;
        display: flex;
        align-items: center;
    }

    .title {
        flex: 1;
        text-align: center;
        font-size: 17px;
        color: @label-color;
        font-weight: 500;
    }

    .right {
        box-sizing: border-box;
        background-color: @primary-color;
        color: @white;
        border-radius: 6px;
        font-size: 14px;
        justify-content: center;
    }
}

.popup-content {
    margin: 0 16px;
    border-radius: 10px;

    .form-item {
        display: flex;
        align-items: center;
        font-size: 16px;
        height: 54px;
        line-height: 36px;
        box-sizing: border-box;

        &::after {
            right: 0;
        }
    }

    .field-textarea {
        padding: 17px 16px;
        display: flex;
        align-items: flex-start;
    }
}
</style>
